<template>
  <view class="page">
    <!-- 状态栏占位 -->
    <view class="status-bar" :style="{ height: statusBarHeight + 'px' }"></view>

    <!-- 顶部导航栏 -->
    <view class="navbar">
      <text class="nav-title">大棚</text>
      <view class="nav-add" @click="showCreateDialog">
        <uni-icons type="plus" size="24" color="#fff"></uni-icons>
      </view>
    </view>

    <!-- 大棚列表 -->
    <view class="content" v-if="greenhouseList.length > 0">
      <view class="greenhouse-list">
        <view
          class="greenhouse-item"
          v-for="(item, index) in greenhouseList"
          :key="item.id"
          @click="enterGreenhouse(item)"
        >
          <view class="greenhouse-info">
            <view class="greenhouse-header">
              <text class="greenhouse-name">{{ item.name }}</text>
              <view class="greenhouse-status" :class="item.status">
                <text class="status-text">{{ getStatusText(item.status) }}</text>
              </view>
            </view>
            <view class="greenhouse-details">
              <view class="detail-item">
                <uni-icons type="thermometer" size="16" color="#4CAF50"></uni-icons>
                <text class="detail-text">{{ item.temperature }}°C</text>
              </view>
              <view class="detail-item">
                <uni-icons type="water" size="16" color="#2196F3"></uni-icons>
                <text class="detail-text">{{ item.humidity }}%</text>
              </view>
              <view class="detail-item">
                <uni-icons type="leaf" size="16" color="#8BC34A"></uni-icons>
                <text class="detail-text">{{ item.crop }}</text>
              </view>
            </view>
            <view class="greenhouse-time">
              <text class="time-text">创建时间：{{ formatTime(item.createTime) }}</text>
            </view>
          </view>
          <view class="greenhouse-arrow">
            <uni-icons type="right" size="16" color="#999"></uni-icons>
          </view>
        </view>
      </view>
    </view>

    <!-- 空状态 -->
    <view class="empty-state" v-else>
      <view class="empty-icon">
        <uni-icons type="home" size="80" color="#ccc"></uni-icons>
      </view>
      <text class="empty-text">暂无大棚</text>
      <text class="empty-hint">点击右上角 + 新建大棚</text>
    </view>

    <!-- 创建/编辑大棚弹窗 -->
    <uni-popup ref="createPopup" type="bottom" :safe-area="false">
      <view class="create-container">
        <view class="create-header">
          <text class="create-title">{{ formMode === 'create' ? '新建大棚' : '编辑大棚' }}</text>
          <view class="create-close" @click="closeCreateDialog">
            <uni-icons type="closeempty" size="20" color="#999"></uni-icons>
          </view>
        </view>

        <view class="create-form">
          <view class="form-item">
            <text class="form-label">大棚名称</text>
            <input
              class="form-input"
              v-model="createForm.name"
              placeholder="请输入大棚名称"
              maxlength="20"
            />
          </view>

          <view class="form-item">
            <text class="form-label">种植作物</text>
            <picker
              mode="selector"
              :value="createForm.cropIndex"
              :range="cropOptions"
              @change="onCropChange"
            >
              <view class="form-input picker">
                {{ createForm.crop || '请选择种植作物' }}
              </view>
            </picker>
          </view>
		  
		  <view class="form-item">
		    <text class="form-label">传感器</text>
		    <picker
		      mode="selector"
		      :value="createForm.cropIndex"
		      :range="cropOptions2"
		      @change="onCropChange2"
		    >
		      <view class="form-input picker">
		        {{ createForm.gy39 || '请选择传感器' }}
		      </view>
		    </picker>
		  </view>

          <view class="form-item">
            <text class="form-label">大棚面积</text>
            <view class="area-input">
              <input
                class="form-input area"
                v-model="createForm.area"
                placeholder="请输入面积"
                type="number"
              />
              <text class="area-unit">平方米</text>
            </view>
          </view>

          <view class="form-item">
            <text class="form-label">大棚类型</text>
            <view class="type-options">
              <view
                class="type-option"
                v-for="type in typeOptions"
                :key="type.value"
                :class="{ active: createForm.type === type.value }"
                @click="selectType(type.value)"
              >
                <text class="type-text">{{ type.label }}</text>
              </view>
            </view>
          </view>

          <view class="form-item">
            <text class="form-label">备注信息</text>
            <textarea
              class="form-textarea"
              v-model="createForm.remark"
              placeholder="请输入备注信息（可选）"
              maxlength="100"
            ></textarea>
          </view>
        </view>

        <view class="create-actions">
          <button class="create-btn cancel" @click="closeCreateDialog">取消</button>
          <button class="create-btn confirm" @click="submitForm" :disabled="!isFormValid">
            {{ formMode === 'create' ? '创建' : '保存' }}
          </button>
        </view>
      </view>
    </uni-popup>

	
    <!-- 大棚详情弹窗 -->
    <uni-popup ref="detailPopup" type="center">
      <view class="detail-container" v-if="selectedGreenhouse">
        <view class="detail-header">
          <text class="detail-title">{{ selectedGreenhouse.name }}</text>
          <view class="detail-close" @click="closeDetailDialog">
            <uni-icons type="closeempty" size="20" color="#999"></uni-icons>
          </view>
        </view>

        <view class="detail-content">
          <view class="detail-section">
            <text class="section-title">环境数据</text>
            <view class="data-grid">
              <view class="data-item">
                <uni-icons type="thermometer" size="24" color="#F44336"></uni-icons>
                <text class="data-label">温度</text>
                <text class="data-value">{{ selectedGreenhouse.temperature }}°C</text>
              </view>
              <view class="data-item">
                <uni-icons type="water" size="24" color="#2196F3"></uni-icons>
                <text class="data-label">湿度</text>
                <text class="data-value">{{ selectedGreenhouse.humidity }}%</text>
              </view>
              <view class="data-item">
                <uni-icons type="sunny" size="24" color="#FF9800"></uni-icons>
                <text class="data-label">光照</text>
                <text class="data-value">{{ selectedGreenhouse.light }}lux</text>
              </view>
              <view class="data-item">
                <uni-icons type="leaf" size="24" color="#4CAF50"></uni-icons>
                <text class="data-label">土壤湿度</text>
                <text class="data-value">{{ selectedGreenhouse.soilHumidity }}%</text>
              </view>
            </view>
          </view>

          <view class="detail-section">
            <text class="section-title">基本信息</text>
            <view class="info-list">
              <view class="info-item">
                <text class="info-label">种植作物：</text>
                <text class="info-value">{{ selectedGreenhouse.crop }}</text>
              </view>
			  <view class="info-item">
			    <text class="info-label">传感器：</text>
			    <text class="info-value">{{ cropOptions2[4] }}</text>
			  </view>
              <view class="info-item">
                <text class="info-label">大棚面积：</text>
                <text class="info-value">{{ selectedGreenhouse.area || '未设置' }}平方米</text>
              </view>
              <view class="info-item">
                <text class="info-label">大棚类型：</text>
                <text class="info-value">{{ getTypeText(selectedGreenhouse.type) }}</text>
              </view>
              <view class="info-item">
                <text class="info-label">备注信息：</text>
                <text class="info-value">{{ selectedGreenhouse.remark || '暂无备注' }}</text>
              </view>
            </view>
          </view>
        </view>

        <view class="detail-actions">
          
          <button class="detail-btn danger" @click="deleteGreenhouse">删除</button>
        </view>
      </view>
    </uni-popup>
  </view>
</template>

<script setup>
import { ref, reactive, computed, onMounted } from 'vue';
import { greenhouseApi, cropApi } from '../../api/index.js';
import { isLoggedIn } from '../../utils/auth.js';

uni.setNavigationBarTitle({
	  title:'大棚'
})

// 系统信息
const statusBarHeight = ref(0);

// 大棚列表
const greenhouseList = ref([]);

// 选中的大棚
const selectedGreenhouse = ref(null);

// 进度显示
const showProgress = ref(false);
const progressValue = ref(0);

// 弹窗引用
const createPopup = ref(null);
const detailPopup = ref(null);

// 表单模式：'create' 或 'edit'
const formMode = ref('create');

// 当前编辑的大棚ID
const editingGreenhouseId = ref(null);

// 创建/编辑表单
const createForm = reactive({
  name: '',
  crop: '',
  cropIndex: 0,
  area: '',
  type: 'glass',
  remark: '',
  gy39:''
});

// 作物选项
const cropOptions = ['番茄', '黄瓜', '茄子', '辣椒', '豆角', '生菜', '菠菜', '韭菜'];
const cropOptions2 = ['1号', '2号', '3号', '4号', '5号', '6号', '7号', '8号'];

// 大棚类型选项
const typeOptions = [
  { label: '玻璃温室', value: 'glass', icon: 'home'},
  { label: '塑料大棚', value: 'plastic', icon: 'shop' },
  { label: '日光温室', value: 'solar', icon: 'sunny' },
  { label: '连栋温室', value: 'multi', icon: 'grid' }
];

// 计算属性
const isFormValid = computed(() => {
  return createForm.name.trim().length > 0 &&
         createForm.crop.length > 0 &&
         createForm.area.length > 0;
});

// 页面初始化
onMounted(() => {
  // 检查登录状态
  if (!isLoggedIn()) {
    uni.reLaunch({
      url: '/pages/login/login'
    });
    return;
  }

  // 获取系统信息
  const systemInfo = uni.getSystemInfoSync();
  statusBarHeight.value = systemInfo.statusBarHeight || 0;

  // 加载大棚列表和作物选项
  loadGreenhouseList();
  loadCropOptions();
});

// 加载大棚列表
const loadGreenhouseList = async () => {
  try {
    uni.showLoading({
      title: '加载中...'
    });

    const response = await greenhouseApi.getGreenhouseList();

    if (response.data && response.data.content) {
      // 处理分页数据
      greenhouseList.value = response.data.content.map(item => ({
        id: item.id,
        name: item.name,
        crop: item.crop,
		gy39: item.gy39,
        area: item.area,
        type: item.type,
        remark: item.remark || '', // 确保 remark 字段存在，即使后端没有返回
        temperature: item.temperature || Math.floor(Math.random() * 10) + 20,
        humidity: item.humidity || Math.floor(Math.random() * 20) + 60,
        light: item.light || Math.floor(Math.random() * 1000) + 2000,
        soilHumidity: item.soilHumidity || Math.floor(Math.random() * 20) + 40,
        status: item.status || 'normal',
        createTime: item.createTime ? new Date(item.createTime).getTime() : Date.now()
      }));
    } else {
      greenhouseList.value = [];
    }

    uni.hideLoading();
  } catch (error) {
    uni.hideLoading();
    console.error('加载大棚列表失败:', error);

    // 如果是网络错误，尝试从本地存储加载
    try {
      const storedList = uni.getStorageSync('greenhouseList');
      if (storedList && storedList.length > 0) {
        greenhouseList.value = storedList;
        uni.showToast({
          title: '已加载本地数据',
          icon: 'none'
        });
      }
    } catch (storageError) {
      console.error('加载本地数据失败:', storageError);
    }
  }
};

// 加载作物选项
const loadCropOptions = async () => {
  try {
    const response = await cropApi.getCropOptions();

    if (response.data && Array.isArray(response.data)) {
      cropOptions.splice(0, cropOptions.length, ...response.data);
    }
  } catch (error) {
    console.error('加载作物选项失败:', error);
    // 使用默认作物选项
  }
};

// 模拟进度
const simulateProgress = () => {
  const timer = setInterval(() => {
    progressValue.value += Math.random() * 15;
    if (progressValue.value >= 100) {
      progressValue.value = 100;
      clearInterval(timer);
      setTimeout(() => {
        showProgress.value = false;
      }, 500);
    }
  }, 200);
};

// 格式化时间
const formatTime = (timestamp) => {
  const date = new Date(timestamp);
  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, '0')}-${String(date.getDate()).padStart(2, '0')}`;
};

// 获取状态文本
const getStatusText = (status) => {
  const statusMap = {
    normal: '正常',
    warning: '警告',
    error: '异常'
  };
  return statusMap[status] || '未知';
};

// 获取类型文本
const getTypeText = (type) => {
  const typeItem = typeOptions.find(item => item.value === type);
  return typeItem ? typeItem.label : '未知';
};

// 显示创建弹窗
const showCreateDialog = () => {
  formMode.value = 'create';
  editingGreenhouseId.value = null;
  resetCreateForm();
  createPopup.value.open();
};

// 显示编辑弹窗
const showEditDialog = (greenhouse) => {
  if (!greenhouse || !greenhouse.id) {
    uni.showToast({
      title: '大棚信息错误',
      icon: 'none'
    });
    return;
  }

  formMode.value = 'edit';
  editingGreenhouseId.value = greenhouse.id;
  fillFormWithGreenhouseData(greenhouse);
  createPopup.value.open();
};

// 关闭创建/编辑弹窗
const closeCreateDialog = () => {
  createPopup.value.close();
  resetCreateForm();
  formMode.value = 'create';
  editingGreenhouseId.value = null;
};

// 重置创建表单
const resetCreateForm = () => {
  createForm.name = '';
  createForm.crop = '';
  createForm.cropIndex = 0;
  createForm.area = '';
  createForm.type = 'glass';
  createForm.remark = '';
};

// 填充表单数据（用于编辑）
const fillFormWithGreenhouseData = (greenhouse) => {
  if (!greenhouse) {
    console.error('填充表单数据失败：大棚数据为空');
    return;
  }

  createForm.name = greenhouse.name || '';
  createForm.crop = greenhouse.crop || '';
  createForm.gy39 = greenhouse.gy39 || '';
  createForm.area = greenhouse.area ? greenhouse.area.toString() : '';
  createForm.type = greenhouse.type || 'glass';
  createForm.remark = greenhouse.remark || '';

  // 设置作物选择器的索引
  const cropIndex = cropOptions.findIndex(crop => crop === greenhouse.crop);
  createForm.cropIndex = cropIndex >= 0 ? cropIndex : 0;
};

// 作物选择变化
const onCropChange = (e) => {
  const index = e.detail.value;
  createForm.cropIndex = index;
  createForm.crop = cropOptions[index];
};

// 作物选择变化
const onCropChange2 = (e) => {
  const index = e.detail.value;
  createForm.cropIndex = index;
  createForm.gy39 = cropOptions2[index];
};

// 选择大棚类型
const selectType = (type) => {
  createForm.type = type;
};

// 统一的表单提交函数
const submitForm = async () => {
  if (formMode.value === 'create') {
    await createGreenhouse();
  } else {
    await updateGreenhouseInfo();
  }
};

// 创建大棚
const createGreenhouse = async () => {
  if (!isFormValid.value) {
    uni.showToast({
      title: '请完善必填信息',
      icon: 'none'
    });
    return;
  }

  uni.showLoading({
    title: '创建中...'
  });

  try {
    const greenhouseData = {
      name: createForm.name,
      crop: createForm.crop,
      area: parseFloat(createForm.area),
      type: createForm.type,
      remark: createForm.remark
    };

    const response = await greenhouseApi.createGreenhouse(greenhouseData);

    if (response.data) {
      // 创建成功，重新加载列表
      await loadGreenhouseList();

      uni.hideLoading();
      uni.showToast({
        title: '创建成功',
        icon: 'success'
      });

      closeCreateDialog();
    } else {
      throw new Error('创建响应数据格式错误');
    }
  } catch (error) {
    uni.hideLoading();
    console.error('创建大棚失败:', error);

    // 错误信息已在请求拦截器中处理，这里不需要重复显示
  }
};

// 更新大棚信息
const updateGreenhouseInfo = async () => {
  if (!isFormValid.value) {
    uni.showToast({
      title: '请完善必填信息',
      icon: 'none'
    });
    return;
  }

  uni.showLoading({
    title: '保存中...'
  });

  try {
    const greenhouseData = {
      name: createForm.name,
      crop: createForm.crop,
      area: parseFloat(createForm.area),
      type: createForm.type,
      remark: createForm.remark
    };

    const response = await greenhouseApi.updateGreenhouse(editingGreenhouseId.value, greenhouseData);

    if (response.data) {
      // 更新成功，重新加载列表
      await loadGreenhouseList();

      uni.hideLoading();
      uni.showToast({
        title: '保存成功',
        icon: 'success'
      });

      closeCreateDialog();
    } else {
      throw new Error('更新响应数据格式错误');
    }
  } catch (error) {
    uni.hideLoading();
    console.error('更新大棚失败:', error);

    // 错误信息已在请求拦截器中处理，这里不需要重复显示
  }
};

// 进入大棚详情
const enterGreenhouse = (greenhouse) => {
  selectedGreenhouse.value = greenhouse;
  detailPopup.value.open();
};

// 关闭详情弹窗
const closeDetailDialog = () => {
  detailPopup.value.close();
  selectedGreenhouse.value = null;
};

// 编辑大棚
const editGreenhouse = () => {
  if (!selectedGreenhouse.value) {
    uni.showToast({
      title: '请先选择大棚',
      icon: 'none'
    });
    return;
  }

  // 保存当前选中的大棚数据，避免在关闭弹窗时丢失
  const currentGreenhouse = selectedGreenhouse.value;
  closeDetailDialog();
  showEditDialog(currentGreenhouse);
};

// 删除大棚
const deleteGreenhouse = () => {
  uni.showModal({
    title: '确认删除',
    content: `确定要删除大棚"${selectedGreenhouse.value.name}"吗？`,
    success: async (res) => {
      if (res.confirm) {
        uni.showLoading({
          title: '删除中...'
        });

        try {
          await greenhouseApi.deleteGreenhouse(selectedGreenhouse.value.id);

          // 删除成功，重新加载列表
          await loadGreenhouseList();

          uni.hideLoading();
          uni.showToast({
            title: '删除成功',
            icon: 'success'
          });

          closeDetailDialog();
        } catch (error) {
          uni.hideLoading();
          console.error('删除大棚失败:', error);

          // 错误信息已在请求拦截器中处理，这里不需要重复显示
        }
      }
    }
  });
};

// 导航跳转
const navigateToWeather = () => {
  uni.switchTab({
    url: '/pages/weather/index'
  });
};

const navigateToMy = () => {
  uni.switchTab({
    url: '/pages/my/index'
  });
};
</script>

<style scoped>
.page {
  min-height: 100vh;
  background: linear-gradient(135deg, #e8f5e9 0%, #f1f8e9 100%);
}

.status-bar {
  background-color: #4CAF50;
}

.navbar {
  height: 88rpx;
  background-color: #4CAF50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 30rpx;
  box-shadow: 0 2rpx 8rpx rgba(76, 175, 80, 0.2);
}

.nav-title {
  color: #ffffff;
  font-size: 36rpx;
  font-weight: 600;
}

.nav-add {
  width: 60rpx;
  height: 60rpx;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.2);
}

.content {
  padding: 20rpx;
  padding-bottom: 120rpx;
}

.greenhouse-list {
  display: flex;
  flex-direction: column;
  gap: 20rpx;
}

.greenhouse-item {
  background-color: #ffffff;
  border-radius: 20rpx;
  padding: 30rpx;
  display: flex;
  align-items: center;
  box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.08);
  transition: transform 0.3s;
}

.greenhouse-item:active {
  transform: scale(0.98);
}

.greenhouse-info {
  flex: 1;
}

.greenhouse-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16rpx;
}

.greenhouse-name {
  font-size: 32rpx;
  color: #333333;
  font-weight: 600;
}

.greenhouse-status {
  padding: 8rpx 16rpx;
  border-radius: 20rpx;
  font-size: 20rpx;
}

.greenhouse-status.normal {
  background-color: #e8f5e9;
  color: #4CAF50;
}

.greenhouse-status.warning {
  background-color: #fff3e0;
  color: #FF9800;
}

.greenhouse-status.error {
  background-color: #ffebee;
  color: #F44336;
}

.greenhouse-details {
  display: flex;
  gap: 24rpx;
  margin-bottom: 12rpx;
}

.detail-item {
  display: flex;
  align-items: center;
  gap: 8rpx;
}

.detail-text {
  font-size: 24rpx;
  color: #666666;
}

.greenhouse-time {
  margin-top: 8rpx;
}

.time-text {
  font-size: 22rpx;
  color: #999999;
}

.greenhouse-arrow {
  margin-left: 20rpx;
}

.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 120rpx 40rpx;
  text-align: center;
}

.empty-icon {
  margin-bottom: 30rpx;
}

.empty-text {
  font-size: 32rpx;
  color: #666666;
  margin-bottom: 16rpx;
}

.empty-hint {
  font-size: 28rpx;
  color: #999999;
  margin-bottom: 60rpx;
}

.progress-container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.progress-circle {
  width: 120rpx;
  height: 120rpx;
  border-radius: 50%;
  background: conic-gradient(#4CAF50 0deg, #e0e0e0 0deg);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20rpx;
  position: relative;
}

.progress-circle::before {
  content: '';
  position: absolute;
  width: 80rpx;
  height: 80rpx;
  background-color: #ffffff;
  border-radius: 50%;
}

.progress-text {
  font-size: 24rpx;
  color: #4CAF50;
  font-weight: 600;
  z-index: 1;
}

.progress-hint {
  font-size: 24rpx;
  color: #999999;
}

.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100rpx;
  background-color: #ffffff;
  display: flex;
  align-items: center;
  justify-content: space-around;
  border-top: 1rpx solid #e0e0e0;
  padding-bottom: env(safe-area-inset-bottom);
}

.nav-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex: 1;
  height: 100%;
}

.nav-text {
  font-size: 20rpx;
  color: #666666;
  margin-top: 8rpx;
}

.nav-text.active {
  color: #4CAF50;
  font-weight: 600;
}

.create-container {
  background-color: #ffffff;
  border-radius: 20rpx 20rpx 0 0;
  max-height: 80vh;
  overflow: hidden;
}

.create-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx;
  border-bottom: 1rpx solid #e0e0e0;
}

.create-title {
  font-size: 32rpx;
  color: #333333;
  font-weight: 600;
}

.create-close {
  width: 40rpx;
  height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.create-form {
  padding: 30rpx;
  max-height: 60vh;
  overflow-y: auto;
}

.form-item {
  margin-bottom: 30rpx;
}

.form-label {
  display: block;
  font-size: 28rpx;
  color: #333333;
  font-weight: 600;
  margin-bottom: 16rpx;
}

.form-input {
  width: 100%;
  height: 80rpx;
  border: 2rpx solid #e0e0e0;
  border-radius: 12rpx;
  padding: 0 24rpx;
  font-size: 28rpx;
  color: #333333;
  background-color: #fafafa;
}

.form-input:focus {
  border-color: #4CAF50;
  background-color: #ffffff;
}

.form-input.picker {
  display: flex;
  align-items: center;
  color: #666666;
}

.area-input {
  display: flex;
  align-items: center;
  gap: 16rpx;
}

.form-input.area {
  flex: 1;
}

.area-unit {
  font-size: 28rpx;
  color: #666666;
}

.type-options {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16rpx;
}

.type-option {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24rpx;
  border: 2rpx solid #e0e0e0;
  border-radius: 12rpx;
  background-color: #fafafa;
  transition: all 0.3s;
}

.type-option.active {
  border-color: #4CAF50;
  background-color: #e8f5e9;
}

.type-text {
  font-size: 24rpx;
  color: #666666;
  margin-top: 8rpx;
}

.type-option.active .type-text {
  color: #4CAF50;
  font-weight: 600;
}

.form-textarea {
  width: 100%;
  min-height: 120rpx;
  border: 2rpx solid #e0e0e0;
  border-radius: 12rpx;
  padding: 16rpx 24rpx;
  font-size: 28rpx;
  color: #333333;
  background-color: #fafafa;
  resize: none;
}

.form-textarea:focus {
  border-color: #4CAF50;
  background-color: #ffffff;
}

.create-actions {
  display: flex;
  padding: 30rpx;
  gap: 20rpx;
  border-top: 1rpx solid #e0e0e0;
}

.create-btn {
  flex: 1;
  height: 80rpx;
  border: none;
  border-radius: 40rpx;
  font-size: 28rpx;
  font-weight: 600;
}

.create-btn.cancel {
  background-color: #f5f5f5;
  color: #666666;
}

.create-btn.confirm {
  background: linear-gradient(135deg, #4CAF50 0%, #66BB6A 100%);
  color: #ffffff;
}

.create-btn.confirm:disabled {
  background: #cccccc;
}

.detail-container {
  width: 640rpx;
  max-height: 80vh;
  background-color: #ffffff;
  border-radius: 20rpx;
  overflow: hidden;
}

.detail-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 30rpx;
  border-bottom: 1rpx solid #e0e0e0;
}

.detail-title {
  font-size: 32rpx;
  color: #333333;
  font-weight: 600;
}

.detail-close {
  width: 40rpx;
  height: 40rpx;
  display: flex;
  align-items: center;
  justify-content: center;
}

.detail-content {
  padding: 30rpx;
  max-height: 60vh;
  overflow-y: auto;
}

.detail-section {
  margin-bottom: 30rpx;
}

.section-title {
  font-size: 28rpx;
  color: #333333;
  font-weight: 600;
  margin-bottom: 20rpx;
}

.data-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 20rpx;
}

.data-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20rpx;
  background-color: #f8f9fa;
  border-radius: 12rpx;
}

.data-label {
  font-size: 24rpx;
  color: #666666;
  margin: 8rpx 0;
}

.data-value {
  font-size: 28rpx;
  color: #333333;
  font-weight: 600;
}

.info-list {
  display: flex;
  flex-direction: column;
  gap: 16rpx;
}

.info-item {
  display: flex;
  align-items: center;
}

.info-label {
  font-size: 26rpx;
  color: #666666;
  min-width: 160rpx;
}

.info-value {
  font-size: 26rpx;
  color: #333333;
  flex: 1;
}

.detail-actions {
  display: flex;
  padding: 30rpx;
  gap: 20rpx;
  border-top: 1rpx solid #e0e0e0;
}

.detail-btn {
  flex: 1;
  height: 80rpx;
  border: 2rpx solid #4CAF50;
  border-radius: 40rpx;
  background-color: transparent;
  color: #4CAF50;
  font-size: 28rpx;
  font-weight: 600;
}

.detail-btn.danger {
  border-color: #F44336;
  color: #F44336;
}
</style>